<template>
  <el-dialog title="添加权限" :visible="isPermissionShow" @close="btnCancel">
    <el-form ref="formData" :model="formData" :rules="rules">
      <el-form-item prop="name" label="权限姓名" label-width="120px">
        <el-input v-model="formData.name" />
      </el-form-item>
      <el-form-item prop="code" label="权限标识" label-width="120px">
        <el-input v-model="formData.code" />
      </el-form-item>
      <el-form-item label="权限描述" label-width="120px">
        <el-input v-model="formData.description" />
      </el-form-item>
      <el-form-item label="企业可见" label-width="120px">
        <el-switch
          v-model="formData.enVisible"
          active-text="1"
          inactive-text="0"
        />
      </el-form-item>
      <!-- 底部的按钮 -->
    </el-form>
    <el-row type="flex" justify="center">
      <el-col :span="5">
        <el-button size="small" @click="btnCancel">取消</el-button>
        <el-button size="small" type="primary" @click="isOk">确定</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import { addPermissionAPI, updatePermissionAPI } from '@/api/index'
export default {
	name: 'PermissionDialog',
	props: {
		isPermissionShow: { // 控制弹出层的显示隐藏
			type: Boolean,
			required: true
		},
		formData: {
			type: Object,
			required: true
		}

	},
	data() {
		return {
			rules: {
        name: [{ required: true, message: '权限名称不能为空', trigger: 'blur' }],
        code: [{ required: true, message: '权限标识不能为空', trigger: 'blur' }]
      }
		}
	},
	methods: {
		// 点击确定按钮，新增权限(两个新增，新增大权限，新增子权限)《《《《《————————————————————————————————————
		async	isOk() {
			this.$refs.formData.validate().then(() => {
				// 校验成功
				if (this.formData.id) {
					// 如果有值，则认为是编辑，执行更新接口
					return updatePermissionAPI(this.formData)
				} else {
					return addPermissionAPI(this.formData)
				}
			}).then(() => {
				// 添加成功
				this.$emit('update:isPermissionShow', false)
				this.$parent.getPermissionList()
			})
		},
		// 关闭取消和弹层按钮《《《《《————————————————————————————————————
		btnCancel() {
			// 重置数据
			this.$emit('updateFormdata', {
        name: '', // 名称
        code: '', // 标识
        description: '', // 描述
        type: '', // 类型 该类型 不需要显示 因为点击添加的时候已经知道类型了
        pid: '', // 因为做的是树 需要知道添加到哪个节点下了
        enVisible: '0' // 开启
      })
			// 移除校验
			this.$refs.formData.resetFields()
			// 关闭弹层
			this.$emit('update:isPermissionShow', false)
		}
	}
}
</script>

<style scoped>
::v-deep .el-dialog__header{
	background-color: #5daeff !important;
}
::v-deep .el-dialog__title{
	color: #fff !important;
}
::v-deep .el-dialog__close{
	color: #fff !important;
}
</style>